import React from "react";
// querystring 模块提供用于解析和格式化 URL 查询字符串的实用工具
//第二种方法 通过qs转化去转化url参数
let qsString = require("querystring");
class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      query: {},
    };
  }
  componentDidMount() {
    console.log(this.props, "订单的属性");
    /* 
         url地址：http://localhost:3000/order?id=2&name=%22%E5%93%88%E5%93%88%22
         如何从地址栏中取出query参数
         ?id=2&name=%22%E5%93%88%E5%93%88%22
         {
             id:1,
             name:''
         }
         */
    //第一步 去掉问号 id=2&name="哈哈"
    let query = this.props.location.search.slice(1);
    //利用原生js的逻辑去解析
    /*     query = query.split("&"); //["id=2", "name="哈哈""]
    //循环遍历数组去掉'='
    let obj = {};
    query.forEach((item) => {
      let tempArr = item.split("=");
      console.log(tempArr);
      obj[tempArr[0]] = tempArr[1];
    });
    console.log(obj, "对象");
    this.setState({
      query: obj,
    }); */
    //第二种方法 通过原生node.jsAPI方法转化
    query = qsString.parse(query);
    this.setState({
      query
    });
  }
  render() {
    const { query } = this.state;
    return (
      <div>
        <h1>订单页！！！</h1>
        <h1>query参数是===={query.id}</h1>
      </div>
    );
  }
}
export default Home;
